 // 需求3：把根据正则的设置内容的代码封装成函数
    // 1、用function (){} 把根据正则设置内容的代码包裹起来
    // 2、把函数中每次使用需要变化的部分，变成函数的参数，由调用时实参传入即可
    /* 
      参数：
        1、正则表达式：reg
        2、事件源（dom对象）：element
        3、错误提醒：txt
    */
        function fn(reg, element, txt) {
         if (reg.test(element.value)) {
           // 通过校验
           element.nextElementSibling.innerHTML = ''
         } else {
           // 未通过校验
           element.nextElementSibling.innerHTML = txt
         }
         // 因为最后外部需要校验是否通过的结果，因此需要返回校验是否通过的数据
         return reg.test(element.value)
       }
      // 手机号校验
      const phone = document.querySelector('input[name=phone]')
    phone.addEventListener('change', function () {
      fn(/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/, phone, '请输入11位手机号')
    })
// 验证码校验
const code = document.querySelector('input[name=code]')
    code.addEventListener('change', function () {
      fn(/^\d{6}$/, code, '请输入6位的验证码')
    })

    // 给img注册点击事件,达到点击切换图片效果

const imgs=document.querySelector('.active img')
    let imgRes
    imgs.addEventListener('click',async function () {
      const res= await axios({url:'http://cba.itlike.com/public/index.php?s=/api/captcha/image',params:{platform:'h5'}})
      imgs.src=res.data.data.base64
      console.log(res.data.data)
    imgRes=res.data.data
      })

// 图形验证码首屏渲染
let imgResshoupin
async function shoupin() {
   const res= await axios({url:'http://cba.itlike.com/public/index.php?s=/api/captcha/image',params:{platform:'h5'}})
   imgs.src=res.data.data.base64
   imgResshoupin=res.data.data
   console.log(res.data.data)
}
shoupin()
// 图形验证码校验
const verification = document.querySelector('input[name=verification]')
if (imgRes) {
   
    code.addEventListener('change', function () {
      fn(imgRes.key, verification, '请输入正确的图形验证码')
    })
}else{
   const verification = document.querySelector('input[name=verification]')
    code.addEventListener('change', function () {
      fn(imgResshoupin.key, verification, '请输入正确的图形验证码')
    })
}
// 验证码事件时间变换
const link = document.querySelector('.code a')
//  用变量储存当前还剩多少时间
let count = 60
link.addEventListener('click', function () {
if (phone.value==''&&verification.value=='') {
   alert('')
}else{
      //点击短信验证码获取验证码数据
alert('测试环境下， 默认的短信验证码为： 246810')

// 一开始设置内容
link.innerHTML = `${count}秒后重新获取`
// 设置定时器，每隔1s修改内容
const timeId = setInterval(function () {
  //  时间-1
  count--
  // 重新设置内容
  link.innerHTML = `${count}秒后重新获取`
  // 如果时间小于等于0，此时需要清除定时器，并且回复默认值
  if (count <= 0) {
    link.innerHTML = '重新获取'
    clearInterval(timeId)
    // 为了保证下一次还是从5开始，需要让count恢复成5
    count = 10
  }
}, 1000)
}
})



// 点击登录页
const logOn=document.querySelector('.log_on')
// logOn.addEventListener('click',function () {
//     if () {
      
//     }
// })